<template>
  <div>
    <el-form
      class="form-container"
      enctype="multipart/form-data"
      :rules="rules"
      :model="postForm"
      v-loading="formLoading"
      ref="postForm"
      label-width="220px"
      label-position="right"
    >
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <i class="square"></i>同学设置
          </span>
        </div>
        <el-form-item label 我的-->
          同学"展示级数：">
          <el-radio v-model="postForm.classmateLevel" :label="1">一级</el-radio>
          <el-radio v-model="postForm.classmateLevel" :label="2">二级</el-radio>
          <el-radio v-model="postForm.classmateLevel" :label="3">三级</el-radio>
        </el-form-item>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <i class="square"></i>班主任管理
          </span>
        </div>
        <el-form-item label="班主任微信号：">
          <el-input v-model="postForm.teacherWechatId" placeholder="请输入班主任微信号" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="班主任二维码(宽230*高230)：">
          <el-upload
            class="avatar-uploader"
            name="avatar"
            :action="mpUploadUrl"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleTeacherQrcodeSuccess"
          >
            <img v-if="postForm.teacherQrcode" :src="postForm.teacherQrcode" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <span class="el-form-tip">（添加班主任时使用）</span>
        </el-form-item>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <i class="square"></i>短信管理
          </span>
        </div>
        <el-form-item label="短信账号：">
          <el-input v-model="postForm.smsAccount" placeholder="用于给用户发送验证码" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="短信密码：">
          <el-input v-model="postForm.smsPassword" placeholder="短信密码" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="短信剩余条数：">
          <el-input v-model="postForm.smsBlance" style="width: 300px" disabled="disabled"></el-input>
        </el-form-item>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <i class="square"></i>分享设置
          </span>
        </div>
        <code>
          <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>备注：分享公众号标题最多支持
          <b>26</b>个字 分享描述最多
          <b>29</b>个字
        </code>
        <el-form-item label="分享公众号标题设置：" prop="shareTitle">
          <el-input
            v-model.trim="postForm.shareTitle"
            placeholder="用于客户分享公众号给微信号有名片的展示"
            style="width: 600px"
          ></el-input>
        </el-form-item>
        <el-form-item label="分享描述：" prop="shareDesc">
          <el-input v-model="postForm.shareDesc" placeholder="分享描述" style="width: 600px"></el-input>
        </el-form-item>
        <!--<el-form-item label="分享后免费收看功能：">-->
        <!--<el-checkbox label="开启视频分享免费收看" v-model="postForm.isVideoFreeAfterSharing" :true-label="1" :false-label="0"></el-checkbox>-->
        <!--<el-checkbox label="开启音频分享免费收看" v-model="postForm.isAudioFreeAfterSharing" :true-label="1" :false-label="0"></el-checkbox>-->
        <!--</el-form-item>-->
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <i class="square"></i>通知设置
          </span>
        </div>
        <el-form-item label="短信通知设置：">
          <el-checkbox
            label="开启短信通知"
            v-model="postForm.enableSmsNotice"
            :true-label="1"
            :false-label="0"
          ></el-checkbox>
          <el-checkbox
            label="开启微信通知"
            v-model="postForm.enableWxNotice"
            :true-label="1"
            :false-label="0"
          ></el-checkbox>
        </el-form-item>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>
            <i class="square"></i>付费协议
          </span>
        </div>
        <el-form-item label="填写付费协议：">
          <tinymce :height="300" v-model="postForm.payRule" style="width: 80%"></tinymce>
        </el-form-item>
      </el-card>
      <!--
			<div class="boder-bottom">
				<label >二维码logo小:(宽320*高320):</label><img style="vertical-align: middle;margin-right: 100px;" src="../../../../../build/logo.png" width="230" height="230"/>
				<el-button type="primary" @click="uploadPic('3')">更改</el-button>
			</div>
			<div class="boder-bottom">
				<label >vip价格:</label><el-input v-model="vipPrice" placeholder="请输入内容" style="width: 230px"></el-input>
			</div>
			<div class="boder-bottom">
				<label >svip价格:</label><el-input v-model="svipPrice" placeholder="请输入内容" style="width: 230px"></el-input>
			</div>
			<div class="boder-bottom">
				<label >默认用户数:</label><el-input v-model="defaultUser" placeholder="请输入内容" style="width: 230px"></el-input>
      </div>-->

      <!-- <div class="boder-bottom">
				<label >vip价格描述:</label><el-input v-model="vipDescribe" placeholder="请输入内容" style="width: 230px"></el-input>
      </div>-->

      <el-form-item style="padding: 10px 0">
        <el-button
          v-if="permission == 3"
          type="primary"
          v-loading="btnLoading"
          icon="el-icon-check"
          @click="submitForm"
        >保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getBasicSetting, saveBasicSetting } from "@/api/basicDatum";
import { shopManage_basicDatum } from "@/utils/permission";
import Tinymce from "@/components/Tinymce";

const postForm = {
  classmateLevel: 1,
  teacherWechatId: null,
  teacherQrcode: null,
  smsAccount: null,
  smsPassword: null,
  shareTitle: null,
  shareDesc: null,
  // isVideoFreeAfterSharing: 0,
  // isAudioFreeAfterSharing: 0,
  permission: 3,
  enableSmsNotice: 0,
  enableWxNotice: 0
};

const rules = {
  shareTitle: [
    { required: true, message: "请输入分享标题", trigger: "blur" },
    { min: 0, max: 26, message: "长度在 0 到 26 个字符", trigger: "blur" }
  ],
  shareDesc: [
    { required: false, message: "请输入分享描述", trigger: "blur" },
    { min: 0, max: 29, message: "长度在 0 到 29 个字符", trigger: "blur" }
  ]
};

export default {
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      mpUploadUrl: process.env.BASE_API + "/common/companies/imageUpload",
      formLoading: false,
      btnLoading: false
    };
  },
  components: {
    Tinymce
  },
  created() {
    this.getModelPermission();
    this.initData();
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_basicDatum();
    },
    initData() {
      getBasicSetting()
        .then(res => {
          if (res.data.data) {
            this.postForm = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    handleTeacherQrcodeSuccess(res, file) {
      if (res.statusCode == 200) {
        this.postForm.teacherQrcode = res.data.imageUrl;
      }
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 或 PNG 格式");
      }
      if (!isLt3M) {
        this.$message.error("上传图片大小不能超过 3MB");
      }
      return isJPG && isLt3M;
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          if (this.btnLoading) {
            return;
          }
          this.btnLoading = true;
          this.formLoading = true;
          saveBasicSetting(this.postForm)
            .then(res => {
              this.btnLoading = false;
              this.formLoading = false;
              this.$message.success("保存成功");
            })
            .catch(err => {
              this.btnLoading = false;
              this.formLoading = false;
              console.log(err);
            });
        } else {
          this.btnLoading = false;
          this.formLoading = false;
          console.log("error submit!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.boder-bottom {
  border-bottom: 1px solid #eee;
  overflow: hidden;
  padding-top: 10px;
}
</style>
